<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>用户信息页面</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- DataTables -->
    <link rel="stylesheet" href="../../../plugins/datatables/dataTables.bootstrap4.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../../../dist/css/adminlte.min.css">
    <link rel="stylesheet" href="../extra.css">

    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
    <style>
        .dj{
            background-color: #007bff;
            border-color: #007bff;
        }
        .dj:hover{
            background-color: #17a2b8;
            border-color: #17a2b8;
        }
        .xg{
            background-color: #28a745;
            border-color: #28a745;
        }
        .xg:hover {
            background-color: #218838;
            border-color: #218838;
        }
        .btn-success {
            color: #fff;
            background-color: #28a745;
            border-color: #28a745;
            box-shadow: 0 1px 1px rgb(0 0 0/8%);
        }
        .btn-success:hover {
            color: #fff;
            background-color: #218838;
            border-color: #218838;
            box-shadow: 0 1px 1px rgb(0 0 0/8%);
        }
    </style>
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand bg-white navbar-light border-bottom">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="index.html" class="nav-link">首页</a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="#" class="nav-link">联系</a>
            </li>
        </ul>

        <!-- SEARCH FORM -->
        <form class="form-inline ml-3">
            <div class="input-group input-group-sm">
                <input class="form-control form-control-navbar" type="search" placeholder="搜索" aria-label="Search">
                <div class="input-group-append">
                    <button class="btn btn-navbar" type="submit">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>
        </form>

        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <button style="font-weight: bold" type="button" class="button-pill button btn-lg button-caution"
                        onclick="logout()">
                    退出
                </button>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">
                    <i class="fa fa-th-large"></i>
                </a>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar user (optional) -->
            <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                <div class="image">
                    <img src="../../../dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
                </div>
                <div class="info">
                    <a href="#" class="d-block">管理员</a>
                </div>
            </div>

            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->
                    <li class="nav-item has-treeview">
                        <a href="index.html" class="nav-link">
                            <i class="nav-icon fa fa-dashboard"></i>
                            <p>
                                概况
                                <!--<i class="right fa fa-angle-left"></i>-->
                            </p>
                        </a>

                    </li>

                    <li class="nav-item has-treeview">
                        <a href="#" class="nav-link active">
                            <i class="nav-icon fa fa-table"></i>
                            <p>
                                基础配置
                                <i class="fa fa-angle-left right"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <!--<li class="nav-item">-->
                            <!--<a href="pages/tables/simple.html" class="nav-link">-->
                            <!--<i class="fa fa-circle-o nav-icon"></i>-->
                            <!--<p>Simple Tables</p>-->
                            <!--</a>-->
                            <!--</li>-->
                            <li class="nav-item">
                                <a href="role.html" class="nav-link">
                                    <i class="fa fa-circle-o nav-icon"></i>
                                    <p>权限配置</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="user.html" class="nav-link">
                                    <i class="fa fa-circle-o nav-icon"></i>
                                    <p>用户信息</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="area.html" class="nav-link">
                                    <i class="fa fa-circle-o nav-icon"></i>
                                    <p>辖区配置</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="duty.html" class="nav-link">
                                    <i class="fa fa-circle-o nav-icon"></i>
                                    <p>职务配置</p>
                                </a>
                            </li>
                        </ul>
                    </li>

                    <li class="nav-item has-treeview">
                        <a href="#" class="nav-link">
                            <i class="nav-icon fa fa-table"></i>
                            <p>
                                案件配置
                                <i class="fa fa-angle-left right"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <a href="casetype.html" class="nav-link">
                                    <i class="fa fa-circle-o nav-icon"></i>
                                    <p>案件类型</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="objecttype.html" class="nav-link">
                                    <i class="fa fa-circle-o nav-icon"></i>
                                    <p>使用对象类型</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="resourcetype.html" class="nav-link">
                                    <i class="fa fa-circle-o nav-icon"></i>
                                    <p>使用资源</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="intended.html" class="nav-link">
                                    <i class="fa fa-circle-o nav-icon"></i>
                                    <p>使用目标</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="pictype.html" class="nav-link">
                                    <i class="fa fa-circle-o nav-icon"></i>
                                    <p>图片类型</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="cardtype.html" class="nav-link">
                                    <i class="fa fa-circle-o nav-icon"></i>
                                    <p>证件种类</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="idtype.html" class="nav-link">
                                    <i class="fa fa-circle-o nav-icon"></i>
                                    <p>目标类型</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>辖区配置</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item">主页</a></li>
                            <li class="breadcrumb-item active">辖区配置</li>
                        </ol>
                        <span class="button-span float-sm-right" style="margin-right: 50px">
                            <button style="font-weight: bold" class="button button-glow button-pill btn-success" data-toggle="modal" data-target="#seeOpponentDetail" onclick="location='areainsert.html'">新增辖区
                            </button>
                        </span>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <!--<div class="card-header">-->
                        <!--<h3 class="card-title">Hover Data Table</h3>-->
                        <!--</div>-->
                        <!-- /.card-header -->
                        <div class="card-body">
                            <table id="user-table" class="table table-bordered table-hover" style="width: 100%;">
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>辖区</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->

                </div>
                <!--&lt;!&ndash; /.col &ndash;&gt;-->
            </div>
            <!--&lt;!&ndash; /.row &ndash;&gt;-->
        </section>
        <!-- /.content -->
    </div>
    <!-- Main Footer -->
    <footer class="main-footer">
        <!-- To the right -->
        <div class="float-right d-none d-sm-block-down">
            Anything you want
        </div>
        <!-- Default to the left -->
        <strong>Copyright &copy; 2018 Solitary.</strong> All rights reserved.
    </footer>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="../../../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables -->
<script src="../../../plugins/datatables/jquery.dataTables.js"></script>
<script src="../../../plugins/datatables/dataTables.bootstrap4.js"></script>
<!-- SlimScroll -->
<script src="../../../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../../../plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../../../dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../../dist/js/demo.js"></script>
<!-- page script -->
<script>
  var table

  $(function () {
    refreshData()
  })


  function del(id) {
    var user_token = sessionStorage.getItem('user_token')

    var settings = {
      'async': true,
      'crossDomain': true,
      'url': 'http://127.0.0.1:5744/api/areas/' + id,
      'method': 'DELETE',
      'headers': {
        'Authorization': user_token
      }
    }


    $.ajax(settings)
      .done(function (response) {
        if (response.code == '0') {
          alert(response.message)
          table.destroy()
          refreshData()

        } else {
          alert(response.message)
        }
      })


  }


  function refreshData() {
    var user_token = sessionStorage.getItem('user_token')

    console.log(user_token)
    var settings = {
      'async': true,
      'crossDomain': true,
      'url': 'http://127.0.0.1:5744/api/areas/list',
      'method': 'GET',
      'headers': {
        'Authorization': user_token
      }
    }

    var data = []

    $.ajax(settings)
      .done(function (response) {
        if (response.code == '0') {
          data = resolveData(response)
          table = $('#user-table')
            .DataTable({
              destroy: true,
              data: data,
              pagingType: "full_numbers",
              language: {
                    //"info": "当前第_PAGE_页，共 _PAGES_页",
                    sInfo: "当前显示第 _START_ 到第 _END_ 条，共 _TOTAL_ 条",
                    sInfoFiltered: "(从_MAX_条筛选 )",
                    sInfoEmpty: "共筛选到0条",
                    sSearch: "搜索:",
                    sLengthMenu: "每页显示 _MENU_ 条",
                    sZeroRecords: "未筛选到相关内容",
                    paginate: {
                        sFirst: "首页",  //首页和尾页必须在pagingType设为full_numbers时才可以
                        sLast: "尾页",
                        sPrevious: "上一页",
                        sNext: "下一页",
                        first: "First page",
                        last: "Last page",
                        next: "Next page",
                        previous: "Previous page"
                    }

               },
              columns: [
                { data: 'id' },
                { data: 'area' }

              ],
              columnDefs: [
                // // 将Salary列变为红色
                // {
                //   "targets": [5], // 目标列位置，下标从0开始
                //   "data": "salary", // 数据列名
                //   "render": function(data, type, full) { // 返回自定义内容
                //     return "<span style='color:red;'>" + data + "</span>";
                //   }
                // },
                // 增加一列，包括删除和修改，同时将我们需要传递的数据传递到链接中
                {
                  'targets': [2], // 目标列位置，下标从0开始
                  'render': function (data, type, row, meta) { // 返回自定义内容
                    // return "<a href='/delete?name=" + data + "'>Delete</a>&nbsp;<a href='/update?name=" + data + "'>Update</a>";
                    return ' <td> ' +
                      '                                              <button class="btn-danger"\n' +
                      '                                                    data-toggle="modal"\n' +
                      '                                                    data-target="#deleteOpponent"\n' +
                      '                                                    onclick="del(' + row.id + ')">\n' +
                      '                                                删除\n' +
                      '                                            </button>\n' +
                      '\n' +
                      '                                        </td>'
                  }
                }
              ]
            })
        } else {

          alert(response.message)
        }
      })
  }

  function resolveData(response) {
    return response.data
  }

  function logout() {
    sessionStorage.removeItem('user_token')
    window.location.href = '../common/login.html'

  }

</script>
</body>
</html>
